<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">

    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加车次</legend>
        <div class="layui-field-box">
            <div class="layui-col-md7">
                <form class="layui-form layui-form-pane" lay-filter="formLine" id="formLine">
                    <!-- <div class="layui-form-item">
                        <img class="layui-upload-img" id="ID-upload-demo-img"
                             style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
                    </div> -->
                    <!--表单控件项：文件上传（专辑封面）-->
                    <!-- <div class="layui-form-item">
                        <button class="layui-btn layui-btn-normal" type="button" id="btnMusic">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择封面图
                        </button>
                    </div> -->
                    <!--表单控件项：专辑名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">车次ID:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="id" id="id" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入车次ID">
                        </div>
                    </div>
                    <!--表单控件项：专辑名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">起始站:</label>
                        <div class="layui-input-inline">
                            <select name="startingstation" id="startingstation">
                                <option value="0">匿名</option>
                            </select>
                        </div>
                        <label class="layui-form-label">终点站:</label>
                        <div class="layui-input-inline">
                            <select name="destination" id="destination">
                                <option value="0">匿名</option>
                            </select>
                        </div>
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">起始站:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="startingstation" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入起始站">
                        </div>
                        <label class="layui-form-label">终点站:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="destination" id="company" lay-verify="required"
                                    lay-verType="tips" lay-reqText="请输入终点站">
                        </div>
                    </div> -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">日期:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="date" id="releasedate" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入日期">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发车时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="departuretime" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入发车时间">
                        </div>
                        <label class="layui-form-label">到达时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="arrivaltime" id="company" lay-verify="required"
                                    lay-verType="tips" lay-reqText="请输入到达时间">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">售价:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="price" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入售价">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">距离:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="distance" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入距离">
                        </div>
                        <label class="layui-form-label">行驶时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="time" id="company" lay-verify="required"
                                    lay-verType="tips" lay-reqText="请输入行驶时间">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">剩余票数:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="ticketnumber" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入剩余票数">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车次状态:</label>
                        <div class="layui-input-inline">
                            <select name="status" id="style">
                                <option value="0">0(正常)</option>
                                <option value="1">1(禁用)</option>
                            </select>
                        </div>
                    <!-- 专辑介绍    -->
                    <!-- <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介:</label>
                        <div class="layui-input-block">
                            <textarea name="summary" class="layui-textarea" placeholder="请填写专辑简介"></textarea>
                        </div>
                    </div> -->
                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="addLine" id="addLine" >确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //日期组件
        var laydate = layui.laydate;

        $.get('http://127.0.0.1:8080/station/listAll',function(resp){
            //火车站列表
            let list = resp.data
            $.each(list,(i,a)=>{
                $('#startingstation').append(`<option value="${a.name}">${a.name}</option>`)
            })
            form.render('select')
        })

        $.get('http://127.0.0.1:8080/station/listAll',function(resp){
            //火车站列表
            let list = resp.data
            $.each(list,(i,a)=>{
                $('#destination').append(`<option value="${a.name}">${a.name}</option>`)
            })
            form.render('select')
        })

        form.on('submit(addLine)', function(data){
            var field = data.field; // 获取表单字段值
            //将js对象转换为json字符串（后台接受对象为requestBody）
            let json = JSON.stringify(field)
            console.log(json);
            // 此处可执行 Ajax 等操作
            // …
            $.ajax({
                url:'http://127.0.0.1:8080/line/reg',  //请求服务器接口地址
                type:'POST',                            //请求方法
                contentType:'application/json',          //数据提交方式
                data:json,                              //数据
                success:function (resp){                //成功的回调函数
                    layer.msg(resp.msg)
                }
            })
            return false; // 阻止默认 form 跳转
        });
        
        

      

        // 渲染日期组件
        laydate.render({
            elem: '#releasedate'
        });

        //对文件上传控件渲染
        upload.render({
            elem: '#btnMusic',
            auto: false,  /*禁止文件选择完成之后自动上传*/
            field: 'myfile',  /*设置文件域字段名，后端接口可以根据该字段名得到文件*/
            accept: 'file', /*设置允许上传的文件类型*/
            acceptMime: 'image/*', /*打开文件筛选框时过滤所需的文件（图片）*/
            choose: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
            }
        })

    })
</script>
</body>
</html>